<template>
    <div class="container">
<!--        头部-->
        <div class="headTitle">
            <div class="icons" @click="backTo">
                <span class="iconfont">&#xe799;</span>
            </div>
            <div class="titles">导入包裹</div>
            <div class="introduction" @click="introduction">说明</div>
        </div>
<!--        主体-->
        <div class="qujian-body">
            <div class="qujian-body-none"></div>
            <div class="qujian-body-title">
                <p>暂无待取包裹</p>
            </div>
            <div class="qujian-body-chaxun">
                <div class="qujian-body-chaxun-toppic">
                    <img src="@/assets/qujian/qujian1.png" />
                </div>
                <div class="qujian-body-chaxun-underpic">
                    <div class="qujian-box">
                        <img id="imgbase">
                        <span>{{uname}}</span>
                    </div>
                    <div class="qujian-box" v-for="item in friends">
                        <img :src="item.imgbase">
                        <span>{{item.uname}}</span>
                    </div>
                    <router-link class="qujian-box" to="/qujian/qujian-add">
                        <img src="@/assets/qujian/add.png"/>
                        <span class="qinyou">添加亲友</span>
                    </router-link>
                </div>
            </div>
            <div class="qujian-body-bottom"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "importPackage",
    data() {
        return {
            uname: '',
            imgbase: '',
            friends: []
        }
    },
    methods:{
        backTo(){
            this.$router.go(-1);
        },
        introduction(){
            this.$router.push('/introduction');
        }
    },
    mounted() {
        let _this = this;
        _this.uname = window.sessionStorage.getItem('uname');
        let imgbase = window.sessionStorage.getItem('imgbase');
        document.getElementById('imgbase').setAttribute('src', imgbase);


    },
    created() {
        let _this = this;
        let friend = JSON.parse(sessionStorage.getItem('friends')) || [];
        _this.friends = friend;
    }
}
</script>

<style lang="scss" scoped>
/*引入图标*/
@import "../../../assets/userIconFont/iconfont.css";
    .container{
        .headTitle{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
            .icons{
                span{
                    font-size: 40px;
                    color: #8590a6;
                }
            }
            .titles{
                font-size: 35px;
            }
            .introduction{
                font-size: 10px;
                color: #8590a6;
            }
        }
        .qujian-container{
            background-color:#EBF3FF;
        }
        .qujian-header{
            height: 50px;
            width: 100%;
            position: fixed;
            top: 0px;
        }
        .qujian-header-guanyu{
            font-size: 50px;
            float: right;
            margin-right: 20px;
        }
        .qujian-body-none{
            height: 50px;
            width: 100%;
        }
        .el-icon-more {
            font-size: 30px;
        }
        .qujian-body-title{
            height: 100px;
            width: 100%;
            font-size: 40px;
            margin: 10px;
            p{
                line-height: 100px;
                margin-left: 40px;
                font-weight: 600;
            }
        }
        .qujian-body-chaxun{
            border-radius: 40px;
            width: 95%;
            height: 650px;
            overflow: hidden;
            background-color: white;
            margin:2.5% auto;
        }
        .qujian-body-chaxun-toppic img{
            width: 101%;
        }
        .qujian-body-chaxun-underpic{
            display: flex;
            justify-content: center;
            .qujian-box {
                width: 80px;
                height: 120px;
                margin: 20px;
                img{
                    width: 100%;
                    display: block;
                    border-radius: 50%;
                }
                span {
                    display: flex;
                    justify-content: center;
                    font-size: 20px;
                    padding-top: 10px;
                }
                .qinyou {
                    color: #2f8cff;
                }
            }
        }
        .qujian-body-title2{
            height: 60px;
            line-height: 70px;
            font-size: 30px;
            margin: 10px;
            p{
                margin-left: 40px;
                font-weight: 600;
            }
        }
        .qujian-body-zhandian{
            border-radius: 30px;
            width: 95%;
            height: 130px;
            margin-left: 2.5%;
            background-color:white;
            margin: 20px;
            p:nth-child(1){
                font-weight: 700;
                font-size: 30px;
                padding:15px 20px;
            }
            p:nth-child(2){
                font-size: 25px;
                padding:0 20px;
            }
        }
        .el-dropdown-link {
            cursor: pointer;

        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
            font-weight:100;
            margin-bottom: 20px;
        }
        .el-dropdown-menu{
            color:lightgray;
        }
        .qujian-body-bottom{
            width: 100%;
            height: 150px;

        }
    }
</style>